<template>
  <el-popover
                placement="top"
                trigger="manual"
                width="160"
                v-model="reset"
                @show="onPopoverShow"
                @hide="onPopoverHide"
              >
                <p>是否重置密码为 12345678</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="reset = false">取消</el-button >
                  <el-button type="primary" size="mini" @click="onReset">确定</el-button>
                </div>
                <el-button
                  slot="reference"
                  type="success"
                  class="isForbiddenBtn"
                  @click="showReset"
                  >重置密码</el-button>
              </el-popover>
</template>

<script>
import { encrypt } from '@/utils/rsaEncrypt'
import { resetPassword } from "@/api/user.js"
export default {
  data () {
    return {
      reset: false,
    }
  },
  props:{
    userId:{
      type: Number,
      default: 0,
    }
  },
  created () {

  },

  methods: {
    showReset(){
      this.reset = true
      this.$emit('showReset')
    },
    async onReset(){
      const password = encrypt('12345678')
      try {
        await resetPassword({
        userId: this.userId,
        password
      })
      this.$notify({
          title: '重置密码成功',
          type: 'success',
          duration: 2000
        });
      } catch (error) {
        this.$notify.error({
          title: '重置密码失败',
          duration: 2000
        });
      }
      this.reset = false
    },
    onPopoverShow() {
      setTimeout(() => {
        document.addEventListener("click", this.handleDocumentClick);
      }, 0);
    },
    onPopoverHide() {
      document.removeEventListener("click", this.handleDocumentClick);
    },
    handleDocumentClick(event) {
      this.reset = false;
    }
  }
}
</script>

<style scoped>

</style>
